<template>
  <div class="home">
      <navbar ></navbar>
      <div class="banner">
      <img src="../../assets/img/home/banner.webp" alt="">
      </div>
      <searchbox ></searchbox>
      <home-categories></home-categories>
      <homeContent></homeContent>
      <div class="search-bar" v-show="isshow">
        <search-bar></search-bar>
      </div>
      <!-- <button @click="loadingmore">加载更多···</button> -->
  </div>
</template>

<script setup>
 import navbar from './cpn/home-nav-bar.vue'
 import searchbox from './cpn/home-search-box.vue'
 import homeCategories from './cpn/home-categories.vue';
 import homeContent from './cpn/home-content.vue';
 import searchBar from '@/components/search-bar/search-bar.vue';
//  import HYRequest from '../../services/request/index.js'
 import { onActivated, ref } from 'vue';
 import useHomeStore from '@/stores/modules/home.js'
 

 const homeStore=useHomeStore();
 homeStore.fetchHotSuggests();
 homeStore.fetchCategories();
 let page=ref(1);
 let isshow=ref(false);
 homeStore.fetchHouselistData(page.value);
 
 //axios发送热门建议请求
//  将数据传递给子组件（home-search-box）
//  const hotSuggests=ref([])
// HYRequest.get({
//   url:'/home/hotSuggests'
// }).then(res=>{
//   console.log(res);
//   hotSuggests.value=res.data;
// })

//   const categories=ref([]);
//   HYRequest.get({
//     url:'/home/categories'
//   }).then(res=>{
//     console.log(res);
//     categories.value=res.data;
//   })
// const loadingmore=()=>{
//   page++;
  // console.log("加载更多···");
//   homeStore.fetchHouselistData(page);
// }

window.addEventListener("scroll",()=>{
  const scrollTop=document.documentElement.scrollTop;
  const clientHeight=document.documentElement.clientHeight;
  const scrollHeight=document.documentElement.scrollHeight;
  if(scrollTop>=100){
    isshow.value=true;
  }else{
    isshow.value=false;
  }
  if(scrollTop + clientHeight >= scrollHeight){
    page.value++;
    console.log("加载更多···",page.value);
    console.log("到底不了");
    
    homeStore.fetchHouselistData(page.value);
  }
})

</script>
<style lang="less" scoped>
.home {
 
  padding-bottom: 60px;
}

.banner {
  
  img {
   
    width: 100%;
  }
}
.search-bar{
  z-index: 9;
  position:fixed;
  top:0;
  left: 0;
  right:0;
  height: 45px;
  padding: 16px 16px 10px;
  background-color: #fff;
  border-bottom: 1px solid #f5f5f5;

}
  
</style>